<template>
<div class="box_main">
  <div class="title">{{data}}</div>
  <img :src="box_src" class="box_main_img">
  <div class="slot"><slot></slot></div>
</div>
</template>

<script>
// eslint-disable-next-line camelcase
import box_link from '@/assets/box.png'
export default {
  name: 'index',
  props: {
    data: String
  },
  data () {
    return {
      box_src: box_link
    }
  }
}
</script>

<style scoped lang="scss">
.box_main{
  width: 90%;
  height: 90%;
  transition: all ease-in-out 0.3s;
  position: relative;
  &:hover{
    box-shadow: 0px 0px 15px #2134a0;
  }
  .box_main_img{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -10;
  }
  .title{
    color: #a2c0c4;
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-top: 13px;
    font-weight: bolder;
    position: absolute;
  }
  .slot{
    width: 100%;
    height: 80%;
    position: absolute;
    bottom: 10px;
  }
}
</style>
